<style lang="scss" src="./scss/item.scss"></style>

<template>
  <div class="list-item">
    <label>
      <input type="checkbox" v-model="isComplete" />
      <span class="title">{{ todo.title }}</span>
    </label>
    <el-button type="danger" size="small" @click="delTodo">删除</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
// 引入接口
import { Todo } from "../types/todo";
export default defineComponent({
  props: {
    todo: {
      type: Object as () => Todo, //函数返回的是Todo类型
      required: true,
    },
    deleteTodo: {
      type: Function,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
    updateTodo: {
      type: Function,
      required: true,
    },
  },
  setup(props) {
    const delTodo = () => {
      if (window.confirm("确定要删除吗？")) props.deleteTodo(props.index);
    };
    // 计算属性的方式来让当前的复选框选中/不选中
    const isComplete = computed({
      get() {
        // 读取复选框状态
        return props.todo.isCompleted;
      },
      set(val) {
        // 当有人点击复选框时 是对todo对象中的isCompleted属性操作
        props.updateTodo(props.todo, val);
      },
    });
    return {
      delTodo,
      isComplete,
    };
  },
});
</script>
